import React, { useState } from 'react'
import { View } from '@tarojs/components'
import { AtCard, AtDivider } from 'taro-ui'
import { request } from '../../utils/request'
import { useRequest } from 'ahooks'
import styles from './index.module.less'

const scoreFuc = () => {
  return request('get', '/app/score', {})
}

const Score: React.FC<{}> = () => {
  const [scoreData, setScoreData] = useState([])
  useRequest(scoreFuc, {
    onSuccess: res => {
      // @ts-ignore
      Object.keys(res).forEach(function (key) {
        // @ts-ignore
        scoreData.push({ name: key, scores: res[key] })
        setScoreData([...scoreData])
      })
    }
  })
  const getColor = (socre: number) => {
    if (socre < 60) {
      return 'red'
    }
    if (socre < 70) {
      return '#fcca11'
    }
    if (socre < 80) {
      return '#e554e8'
    }
    if (socre < 90) {
      return '#1672e5'
    }
    if (socre <= 100) {
      return '#15dd15'
    }
  }
  return (
    <View className={styles.school}>
      {
        scoreData && scoreData.map(item => {
          return <AtCard
            // @ts-ignore
            title={item.name}
          >

            {/* @ts-ignore */}
            {item.scores && item.scores!.map((i, index) =>
              <View>
                <View className={styles.layout}>
                  <View style={{ backgroundColor: getColor(i.score) }} className={styles.score}>{i.score}</View>
                  <View>
                    <View className={styles.courseName}>{i.courseName}</View>
                    <View className={styles.other}>学分：{i.credit} [{i.type}]  课程号：{i.courseId} </View>
                  </View>
                </View>
                {/* @ts-ignore */}
                {index !== item.scores.length - 1 && <AtDivider />}
              </View>
            )}
          </AtCard>
        })

      }

    </View>
  )
}

export default Score